<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<script src="./js/vue3.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 
		<link rel="stylesheet" href="./css/elementui.css">
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
		<script src="./js/elementui.js"></script>
		<title>gpuViewer</title>
	</head>
	<body>
		<div id="app">
    		<el-card v-for="(cards, name, index) in gpus" style="margin-bottom: 20px;">
    			<div slot="header" class="clearfix">
    				<span>{{name}}</span>
						<el-tag :type="online[name]?'success':'danger' ">{{online[name]?"在线":"离线"}}</el-tag>
    			</div>
    			<div class="row" v-for="card in cards">
    				<div class="col" style="display: flex; flex-direction: row; margin-top: 10px; margin-bottom: 10px;">
    					<div class="icon" style="width: 30px;"> <div class="num-icon">{{card.idx}}</div> </div>
    					<div class="progress-bar">
    						<div class="progress-bg" v-for="user in card.users" :style="{background: user.color, width: user.percent + '%'}">
    							{{user.name}} {{(user.occupy/1000).toFixed(1)}}G
    						</div>
    					</div>
    					<div class="bar-text" :style="{color: card.color}">{{(card.occupy/1000).toFixed(1)}}G {{card.temperature}}°C {{card.percent}}%</div>
    				</div>
    			</div>
    		</el-card>
	    </div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function(){ return { gpus:{},  test: 'test', user_simple: {} ,py:[], last_update: {}, online: {} } },
			
			mounted(){
				var py = ['ba','bo','bai','bei','bao','ban','ben','bang','beng','bi','bie','biao','bian','bin','bing','bu','pa','po','pai','pao','pou','pan','pen','pei','pang','peng','pi','pie','piao','pian','pin','ping','pu','ma','mo','me','mai','mao','mou','man','men','mei','mang','meng','mi','mie','miao','miu','mian','min','ming','mu','fa','fo','fei','fou','fan','fen','fang','feng','fu','da','de','dai','dei','dao','dou','dan','dang','den','deng','di','die','diao','diu','dian','ding','dong','du','duan','dun','dui','duo','ta','te','tai','tao','tou','tan','tang','teng','ti','tie','tiao','tian','ting','tong','tu','tuan','tun','tui','tuo','na','nai','nei','nao','ne','nen','nan','nang','neng','ni','nie','niao','niu','nian','nin','niang','ning','nong','nou','nu','nuan','nun','nuo','nü','nüe','la','le','lo','lai','lei','lao','lou','lan','lang','leng','li','lia','lie','liao','liu','lian','lin','liang','ling','long','lu','luo','lou','luan','lun','lü','lüe','ga','ge','gai','gei','gao','gou','gan','gen','gang','geng','gong','gu','gua','guai','guan','guang','gui','guo','ka','ke','kai','kao','kou','kan','ken','kang','keng','kong','ku','kua','kuai','kuan','kuang','kui','kun','kuo','ha','he','hai','han','hei','hao','hou','hen','hang','heng','hong','hu','hua','huai','huan','hui','huo','hun','huang','ji','jia','jie','jiao','jiu','jian','jin','jiang','jing','jiong','ju','juan','jun','jue','qi','qia','qie','qiao','qiu','qian','qin','qiang','qing','qiong','qu','quan','qun','que','xi','xia','xie','xiao','xiu','xian','xin','xiang','xing','xiong','xu','xuan','xun','xue','zha','zhe','zhi','zhai','zhao','zhou','zhan','zhen','zhang','zheng','zhong','zhu','zhua','zhuai','zhuan','zhuang','zhun','zhui','zhuo','cha','che','chi','chai','chao','chou','chan','chen','chang','cheng','chong','chu','chua','chuai','chuan','chuang','chun','chui','chuo','sha','she','shi','shai','shao','shou','shan','shen','shang','sheng','shu','shua','shuai','shuan','shuang','shun','shui','shuo','re','ri','rao','rou','ran','ren','rang','reng','rong','ru','ruan','run','ruo','za','ze','zi','zai','zao','zan','zou','zang','zei','zen','zeng','zong','zu','zuan','zun','zui','zuo','ca','ce','ci','cai','cao','cou','can','cen','cang','ceng','cong','cu','cuan','cun','cui','cuo','sa','se','si','sai','sao','sou','san','sen','sang','seng','song','su','suan','sun','sui','suo','ya','yao','you','yan','yang','yu','ye','yue','yuan','yi','yin','yun','ying','yo','yong','wa','wo','wai','wei','wan','wen','wang','weng','wu']
				py.sort((a,b)=>b.length-a.length); this.py = py
				axios.get('http://baka:5000/gpu').then(resp=>{ this.render_gpu(resp.data) })
				setInterval(()=>{
					axios.get('http://baka:5000/gpu').then(resp=>{ this.render_gpu(resp.data) })
					console.log(new Date(), this.last_update)
					for(var k in this.last_update)
						if(new Date() - this.last_update[k] > 10000) 
							this.online[k] = false
				}, 5000)
			},
			methods: {
				render_gpu(gpus){
					colors = ['#2e75b6', '#f4b183', '#a9d18e', '#c00000']
					var phone = document.body.clientWidth < 720
					console.log(gpus)

					for(var k in gpus){
						gpus[k].forEach(card=>{
							card.color = card.temperature > 70? '#f56c6c': (card.temperature > 40? '#e6a23c': '#67c23a')
							card.users.forEach((user, index, arr)=>{
									if(phone){
										if(!this.user_simple[user.name]) this.user_simple[user.name] = this.get_simple(user.name, this.py)
										user.name = this.user_simple[user.name]
									}
									user.color = colors[index]
									user.percent = parseInt(user.occupy / 110)
							})
						})
						this.online[k] = true
						this.last_update[k] = new Date()
					}
					this.gpus = gpus
				},
				get_simple(name, py){
					var idx = 0
					var simple = ''
					var count = 0
					while(idx<name.length){
						for (let index = 0; index < py.length; index++) {
							count +=1; if(count > 2000) idx = 2000
							const p = py[index];
							if(name.slice(idx, idx + p.length) == p){
								idx += p.length
								simple += p.slice(0,1)
								break
							}
						}
					}
					return simple
				}
			}
		})
	</script>

	<style>
		@media screen and (max-width: 300px) {
			body {
				background-color:lightblue;
			}
		}
		/*手机*/
		@media screen and (max-width: 720px){
			.bar-text{
				width: 70px;  white-space: nowrap; overflow-x: scroll; 
			}
		}
		/*电脑*/
		@media screen and (min-width: 720px){
			.bar-text{
				width: 150px;  white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;
			}
		}
		/*@media screen and (min-width: 720px) and (max-width: 1280px){*/
		/*	.bar-text{*/
		/*		width: 150px;  white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;*/
		/*	}*/
		/*}*/
		/*@media screen and (min-width: 1280px) and (max-width: 1960px){*/
		/*	.bar-text{*/
		/*		width: 140px;  white-space: nowrap; */
		/*	}*/
	    body{
	        background: #f0f0f0;
	        height: 100vh;
	    }
		.num-icon{
			display: flex; justify-content: center;
			width: 25px; height: 25px; border-radius: 25px; 
			line-height: 25px; 
			background: #48a2ff; color: white;
		}
		.progress-bar{
			width: 100%; height: 25px;
			display: flex; flex-direction: row;
			overflow: hidden; 
			box-sizing: border-box;
			border-radius: 24px;
			background: #dee1e6;
			position: relative;
			margin-left: 10px; margin-right: 10px;
		}
		.progress-bg{
			display: flex; flex-direction: row; justify-content: center;
			height: 100%; color: white; line-height: 25px; font-size: 13px;
			word-break: break-all;
		}
		.progress-bg:last-child{
			border-radius: 0px 24px 24px 0px;
		}

	</style>

</html>
